<template>
	<view class="drag" @touchmove.stop.prevent="clear">
		<view class="dragwrap" v-if="isShow">
			<view class="dragmask" @click.stop="close"></view>
			<view class="dragbox" @touchstart="dragStart" @touchmove="dragMove" @touchend="dragEnd">
				<view class="title" @touchstart="titleStart" @touchend="titleEnd">
					<view class="title-h3">
						<text>{{title}}</text>
					</view>
					<view class="title-close" @click.stop="close"></view>
				</view>
				<scroll-view class="scroll" scroll-y>
					<view class="scrollbox">
						<slot />
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script module="render" lang="renderjs">
	let el, mask, scroll;
	let startY = null,
		scrolling = false,
		newY = null,
		isTitle = false;
	export default {
		name: 'uDrag',
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isShow: false,
				duration: 0.3
			};
		},
		mounted() {},
		methods: {
			clear(e) {
				e.stopPropagation()
			},
			titleStart() {
				isTitle = true;
			},
			titleEnd() {
				isTitle = false;
			},
			dragStart(e) {
				let ev = e.touches ? e.touches[0] : e;
				startY = ev.clientY;
				el.style.transition = null;
				mask.style.transition = null;
			},
			dragMove(e) {
				if (startY == null) return;
				let ev = e.touches ? e.touches[0] : e;
				if (scroll.scrollTop === 0 || isTitle) {
					let fs = false;
					if (scrolling) {
						startY = ev.clientY;
						scrolling = false;
						fs = true;
					}
					newY = ev.clientY - startY;
					if (newY < 0) {
						newY = 0;
					}
					el.style.transform = `translateY(${newY}px)`;
					if (!fs && newY > 0 && e.cancelable) {
						e.preventDefault()
					}
					if (mask) {
						mask.style.opacity = 1 - newY / el.offsetHeight;
					}
				} else {
					scrolling = true;
					newY = ev.clientY - startY;
				}
			},
			dragEnd(e) {
				const {
					duration
				} = this;
				el.style.transition = `transform ${duration}s`;
				if (newY && newY > el.offsetHeight / 2.4) {
					this.close();
				} else {
					el.style.transform = 'translateY(0)';
					mask.style.opacity = 1;
				}
				startY = null;
				newY = null;
			},
			open() {
				this.isShow = true;
				this.$nextTick(() => {
					el = document.querySelector('.dragbox');
					mask = document.querySelector('.dragmask');
					scroll = document.querySelector('.scroll .uni-scroll-view .uni-scroll-view');
					const {
						duration
					} = this;
					el.style.display = 'block';
					el.style.transition = null;
					el.style.transform = `translateY(${el.offsetHeight}px)`;
					if (mask) {
						mask.style.display = 'block';
						mask.style.opacity = '0';
					}
					setTimeout(function() {
						el.style.transition = `transform ${duration}s`;
						el.style.transform = 'translateY(0)';
						if (mask) {
							mask.style.transition = `opacity ${duration}s`;
							mask.style.opacity = '1';
						}
					}, 20);
				})
			},
			close() {
				const {
					duration
				} = this;
				el.style.transition = `transform ${duration}s`;
				el.style.transform = `translateY(${el.offsetHeight}px)`;
				if (mask) {
					mask.style.transition = `transform ${duration}s`;
					mask.style.opacity = '0';
				}
				setTimeout(function() {
					this.isShow = false;
					el.style.display = 'none';
					if (mask) {
						mask.style.display = 'none';
					}
				}, 300);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.dragWrap {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 491;
		width: 100%;
		height: 100vh;
	}

	.dragmask {
		display: none;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: rgba($color: #000000, $alpha: .5);
		width: 100%;
		height: 100%;
	}

	.dragbox {
		display: none;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 70%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.title {
		padding: 30rpx 50rpx;
		position: relative;
		border-bottom: 1px solid #f6f6f6;

		.title-h3 {
			display: block;
			text-align: center;

			text {
				text-align: center;
				font-size: 28rpx;
				color: #333;
				line-height: 30rpx;
			}
		}

		.title-close {
			display: block;
			position: absolute;
			top: 50%;
			right: 20rpx;
			width: 40rpx;
			height: 40rpx;
			margin-top: -20rpx;
			background: url('') no-repeat center;
			background-size: 100%;
		}
	}

	.scroll {
		display: block;
		width: 100%;
		height: calc(100% - 90rpx);
	}
</style>
